{% extends 'base.html' %}

{% block title %}{{ '编辑任务' if task else '添加任务' }} - 项目管理系统{% endblock %}

{% block page_title %}{% endblock %}
{% block page_subtitle %}{% endblock %}

{% block content %}
<div class="container mx-auto space-y-6">
    <!-- 面包屑导航 -->
    <nav class="text-sm breadcrumbs" aria-label="面包屑导航">
        <ol class="flex flex-wrap items-center space-x-1 md:space-x-3">
            <li class="inline-flex items-center">
                <a href="{{ url_for('main.home') }}" class="text-gray-700 hover:text-primary transition-colors">首页</a>
                <i class="fas fa-chevron-right w-4 h-4 mx-2 text-gray-400"></i>
            </li>
            <li class="inline-flex items-center">
                <a href="{{ url_for('project.list_projects') }}" class="text-gray-700 hover:text-primary transition-colors">项目管理</a>
                <i class="fas fa-chevron-right w-4 h-4 mx-2 text-gray-400"></i>
            </li>
            {% if task and task.project %}
            <li class="inline-flex items-center">
                <a href="{{ url_for('project.project_detail', project_id=project_id or task.project.id) }}" class="text-gray-700 hover:text-primary transition-colors">
                    {{ task.project.name }}
                </a>
                <i class="fas fa-chevron-right w-4 h-4 mx-2 text-gray-400"></i>
            </li>
            {% endif %}
            <li class="inline-flex items-center text-primary font-medium">{{ '编辑任务' if task else '添加任务' }}</li>
        </ol>
    </nav>
    
    <!-- 页面标题 -->
    <h1 class="text-2xl font-bold text-gray-900">{{ '编辑任务' if task else '添加任务' }}</h1>

    <!-- 表单卡片 -->
    <div class="bg-white overflow-hidden shadow-lg rounded-xl border border-gray-100 transition-all duration-300 hover:shadow-xl">
        <div class="px-4 py-5 sm:p-6">
            <form method="POST" class="space-y-6">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                {% if not task or not task.project %}
                <!-- 项目选择（仅在添加任务或任务没有关联项目时显示） -->
                <div>
                    <label for="project_id" class="block text-sm font-medium text-gray-700 mb-1">所属项目</label>
                    <select 
                        id="project_id" 
                        name="project_id" 
                        class="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm transition-all duration-300"
                    >
                        <option value="">请选择项目</option>
                        {% for project in projects %}
                        <option 
                            value="{{ project.id }}" 
                            {% if (task and task.project_id == project.id) or 
                                  (request.form.project_id and request.form.project_id == project.id) %}
                            selected
                            {% endif %}
                        >
                            {{ project.name }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                {% endif %}

                <!-- 任务名称 -->
                <div>
                    <label for="name" class="block text-sm font-medium text-gray-700 mb-1">任务名称 <span class="text-red-500">*</span></label>
                    <input 
                        type="text" 
                        id="name" 
                        name="name" 
                        value="{{ request.form.name or task.name if task else '' }}" 
                        required
                        class="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm transition-all duration-300"
                    >
                </div>

                <!-- 父任务 -->
                <div>
                    <label for="parent_id" class="block text-sm font-medium text-gray-700 mb-1">父任务</label>
                    <select 
                        id="parent_id" 
                        name="parent_id" 
                        class="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm transition-all duration-300"
                    >
                        <option value="0">无（顶级任务）</option>
                        {% for project_task in project_tasks %}
                        <option 
                            value="{{ project_task.id }}" 
                            {% if (task and task.parent_id == project_task.id) or 
                                  (request.form.parent_id and request.form.parent_id == project_task.id) %}
                            selected
                            {% endif %}
                        >
                            {{ project_task.name }}
                        </option>
                        {% endfor %}
                    </select>
                </div>

                <!-- 里程碑 -->
                <div>
                    <label for="milestone_id" class="block text-sm font-medium text-gray-700 mb-1">关联里程碑</label>
                    <select 
                        id="milestone_id" 
                        name="milestone_id" 
                        class="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm transition-all duration-300"
                    >
                        <option value="">无关联里程碑</option>
                        {% for milestone in milestones %}
                        <option 
                            value="{{ milestone.id }}" 
                            {% if (task and task.milestone_id == milestone.id) or 
                                  (request.form.milestone_id and request.form.milestone_id == milestone.id) %}
                            selected
                            {% endif %}
                        >
                            {{ milestone.name }} ({{ milestone.due_date.strftime('%Y-%m-%d') if milestone.due_date else '无截止日期' }})
                        </option>
                        {% endfor %}
                    </select>
                </div>

                <!-- 基本信息行 -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <!-- 负责人 -->
                    <div>
                        <label for="assignee_id" class="block text-sm font-medium text-gray-700 mb-1">负责人</label>
                        <select 
                            id="assignee_id" 
                            name="assignee_id" 
                            class="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm transition-all duration-300"
                        >
                            <option value="">请选择负责人</option>
                            {% for user in users %}
                            <option 
                                value="{{ user.id }}" 
                                {% if (task and task.assignee_id == user.id) or 
                                      (request.form.assignee_id and request.form.assignee_id == user.id) %}
                                selected
                                {% endif %}
                            >
                                {{ user.name }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <!-- 优先级 -->
                    <div>
                        <label for="priority" class="block text-sm font-medium text-gray-700 mb-1">优先级</label>
                        <select 
                            id="priority" 
                            name="priority" 
                            class="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm transition-all duration-300"
                        >
                            <option value="低" {% if task and task.priority == '低' %}selected{% endif %}>低</option>
                            <option value="中" {% if task and task.priority == '中' %}selected{% endif %}>中</option>
                            <option value="高" {% if task and task.priority == '高' %}selected{% endif %}>高</option>
                            <option value="紧急" {% if task and task.priority == '紧急' %}selected{% endif %}>紧急</option>
                        </select>
                    </div>
                    
                    <!-- 状态 -->
                    <div>
                        <label for="status" class="block text-sm font-medium text-gray-700 mb-1">状态</label>
                        <select 
                            id="status" 
                            name="status" 
                            class="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm transition-all duration-300"
                        >
                            <option value="未开始" {% if task and task.status == '未开始' %}selected{% endif %}>未开始</option>
                            <option value="进行中" {% if task and task.status == '进行中' %}selected{% endif %}>进行中</option>
                            <option value="已完成" {% if task and task.status == '已完成' %}selected{% endif %}>已完成</option>
                            <option value="已暂停" {% if task and task.status == '已暂停' %}selected{% endif %}>已暂停</option>
                        </select>
                    </div>
                </div>

                <!-- 日期行 -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <!-- 开始日期 -->
                    <div>
                        <label for="start_date" class="block text-sm font-medium text-gray-700 mb-1">开始日期</label>
                        <input 
                            type="date" 
                            id="start_date" 
                            name="start_date" 
                            value="{{ request.form.start_date or task.start_date.strftime('%Y-%m-%d') if task and task.start_date else '' }}"
                            class="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm transition-all duration-300"
                        >
                    </div>
                    
                    <!-- 截止日期 -->
                    <div>
                        <label for="end_date" class="block text-sm font-medium text-gray-700 mb-1">截止日期</label>
                        <input 
                            type="date" 
                            id="end_date" 
                            name="end_date" 
                            value="{{ request.form.end_date or task.end_date.strftime('%Y-%m-%d') if task and task.end_date else '' }}"
                            class="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm transition-all duration-300"
                        >
                    </div>
                    
                    <!-- 进度 -->
                    <div>
                        <label for="progress" class="block text-sm font-medium text-gray-700 mb-1">进度 (%)</label>
                        <input 
                            type="number" 
                            id="progress" 
                            name="progress" 
                            min="0" 
                            max="100" 
                            value="{{ request.form.progress or task.progress if task else 0 }}"
                            class="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm transition-all duration-300"
                        >
                    </div>
                </div>

                <!-- 任务描述 -->
                <div>
                    <label for="description" class="block text-sm font-medium text-gray-700 mb-1">任务描述</label>
                    <textarea 
                        id="description" 
                        name="description" 
                        rows="5" 
                        class="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm transition-all duration-300"
                    >{{ request.form.description or task.description if task else '' }}</textarea>
                </div>

                <!-- 操作按钮 -->
                <div class="flex flex-col sm:flex-row sm:justify-end sm:space-x-3">
                    {% if task and task.project %}
                    <a 
                        href="{{ url_for('project.project_detail', project_id=project_id or task.project.id) }}" 
                        class="inline-flex items-center justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-all duration-300"
                    >
                        取消
                    </a>
                    {% else %}
                    <a 
                        href="{{ url_for('project.list_projects') }}" 
                        class="inline-flex items-center justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-all duration-300"
                    >
                        取消
                    </a>
                    {% endif %}
                    <button 
                        type="submit" 
                        class="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg shadow-sm text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-all duration-300"
                    >
                        <i class="fas fa-save mr-2"></i> {{ '保存任务' if task else '创建任务' }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}